<div class="card card-custom gutter-b">
    <div class="card-header align-items-center border-0">
        <h3 class="card-title align-items-start flex-column">
                <span class="font-weight-bolder text-dark">
                     {{"DateAndTimePickers" | localize}}
                </span>
        </h3>
    </div>
    <div class="card-body">
        <form role="form" class="form">
            <div class="form-group row">
                <label for="SampleDatePicker" class="col-md-12">Default date picker</label>
                <div class="col-lg-10 col-md-9 col-sm-8">
                    <input id="SampleDatePicker"
                           type="text"
                           #SampleDatePicker
                           name="SampleDatePicker"
                           class="form-control"
                           bsDatepicker
                           datePickerLuxonModifier
                           [(date)]="sampleDate"
                           [bsConfig]="{ adaptivePosition: true }"/>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-4">
                    <button class="btn btn-primary" type="button"
                            (click)="submitDate()">{{"Submit" | localize}}</button>
                </div>
            </div>

            <div class="form-group row">
                <label for="SampleDateRangePicker" class="col-md-12">Default daterange picker</label>
                <div class="col-lg-10 col-md-9 col-sm-8">
                    <input name="SampleDateRangePicker"
                           type="text"
                           class="form-control"
                           id="SampleDateRangePicker"
                           bsDaterangepicker
                           dateRangePickerLuxonModifier
                           [(date)]="sampleDateRange"
                    />
                </div>
                <div class="col-lg-2 col-md-3 col-sm-4">
                    <button class="btn btn-primary" (click)="submitDateRange()"
                            type="button">{{"Submit" | localize}}</button>
                </div>
            </div>
        </form>
    </div>
</div>
